<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>七牛云盘系统 - 上传测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/upload.css">
</head>
<body>
    <div class="container">
        <div class="upload-container">
            <h3 class="mb-4 text-center">七牛云文件上传测试</h3>
            
            <!-- 方法1: 传统文件上传区域 -->
            <div class="mb-4">
                <h5>方法1: 传统文件选择</h5>
                <div class="mb-3">
                    <input type="file" id="fileInput1" class="form-control" multiple>
                </div>
                <button id="uploadBtn1" class="btn btn-primary">上传文件</button>
            </div>
            
            <hr>
            
            <!-- 方法2: 可点击区域 -->
            <div class="mb-4">
                <h5>方法2: 可点击区域</h5>
                <div class="upload-area" id="uploadArea2">
                    <i class="bi bi-cloud-upload"></i>
                    <p class="mb-0">点击此区域选择文件</p>
                </div>
                <input type="file" id="fileInput2" class="file-input" multiple>
                <div id="status2" class="text-muted small"></div>
            </div>
            
            <hr>
            
            <!-- 方法3: 使用点击 + 拖拽上传 -->
            <div class="mb-4">
                <h5>方法3: 点击或拖拽上传</h5>
                <div id="dragUploadArea" class="upload-area d-block">
                    <i class="bi bi-cloud-upload fs-2"></i>
                    <p class="mb-0 mt-2">点击选择文件或拖拽文件到这里</p>
                    <small class="text-muted d-block mt-2">支持单个或多个文件</small>
                </div>
                <input type="file" id="fileInput3" class="file-input" multiple>
                <div id="status3" class="text-muted small"></div>
            </div>
            
            <hr>
            
            <!-- 状态显示 -->
            <div class="status-area" id="uploadStatus">
                <h5>上传状态</h5>
                <div id="statusContent">准备就绪，请选择上传方式</div>
            </div>
            
            <div class="text-center mt-3">
                <a href="/" class="btn btn-secondary">返回主页</a>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="/js/upload.js"></script>
</body>
</html> 